<template>
  <div class="referrer">
    <div id="jsmind_container" style="width: 100%; height: 100vh;"></div>
  </div>
</template>
 
<script>
 
export default {
  data(){
    return{
      list: [],
      userForm:{},
      mind:{"meta": {
          "name": "example",
          "author": "hizzgdev",
          "version": "0.2"
        },
        "format": "node_tree",
        "editable": true,
        "data": {
          "id": "userNo",
          "topic": "",
          "direction": "left",
          "expanded": true,
          "parentid": 'root',
          "children": []
        }},
        options:{
          container: 'jsmind_container',
          theme: 'primary',
          editable: true,
          support_html: true,
          mode :'full',  // 'full' or 'side'
          theme:'primary', // 主题
          view:{
              engine: 'svg',   // 思维导图各节点之间线条的绘制引擎
              hmargin:100,        // 思维导图距容器外框的最小水平距离
              vmargin:50,         // 思维导图距容器外框的最小垂直距离
              line_width:1,       // 思维导图线条的粗细
              line_color:'#755936',  // 思维导图线条的颜色
              line_style:'straight',// 思维导图线条的样式，直线(straight)或者曲线(curved)
              custom_line_render: null,  // 自定义的线条渲染方法
              zoom: {             // 配置缩放
                  min: 0.5,       // 最小的缩放比例
                  max: 1,       // 最大的缩放比例
                  step: 0.1,      // 缩放比例间隔
              }, 
          }
        },
        jm: null, // 思维导图对象
        firstShow: true,
        rmData:{},
        index:0,
    }
  },
  created(){
    this.init();
    this.getUserInfo();
    
  },
  mounted() {
      console.log('this.mind:',this.mind,this.jm)
  },

  methods:{
    
    getUserInfo(){
        this.$api.get(this.$url.user.info).then(res=>{
            console.log('my...res:',res)
            if(res.code == 'SUCCESS'){
                this.userForm = res.data;
                this.$store.commit('setUserInfo',res.data);
                this.mind.data.topic = res.data.userName;
            }else{
                
            }
        })
    },
    init(){
      let that = this;
      that.firstShow = true;
        that.$api.get('user/net/recommend').then(res=>{
            console.log('my...res:',res)
            if(res.code == 'SUCCESS'){
              that.rmData = res.data;
              const keys = []
              function traverse(obj,i) {
                Object.keys(obj).forEach(key => {
                  if(that.firstShow){
                    if(key == that.$store.state.userInfo.userNo){
                      console.log('key: ',key,obj[key].subsList,obj,key)
                      keys.push(obj[key].subsList)
                      that.firstShow = false;
                    }
                  } else {
                    
                  }
                })
              }
              traverse(res.data)
              that.list = keys[0];
                for(let i in that.list){
                  that.list[i].id = that.list[i].userNo;
                  that.list[i].topic = that.list[i].userName+'('+that.list[i].userNo+')';
                  that.list[i].parentid = that.list[i].userNo;
                  that.list[i].isroot = false;
                  that.list[i].expanded = true;
                  that.list[i].children = [];
                }
                that.mind.data.children = that.list;
                that.jm = new jsMind(that.options);
                console.log('init this.list: ',that.list)
                
                that.setupEvents();
                that.jm.show(that.mind);
                // jm.select_node(node); //选中节点
                return [...new Set(keys)] // 去重
            }
        })
    },
    setupEvents(){
      let that = this;
      that.jm.view.container.addEventListener('click', (e) => {
        let nodeId = e.target.getAttribute('nodeid'); // 获取被点击节点的 nodeid
        console.log('节点被点击:', e.target);
        that.addList(nodeId);
      });
    },
    addList(userNo){
      console.log('addList 节点被点击', userNo);
      let that = this;
      // that.jm.add_node('userNo',''+that.index++,'avc',{id:'AA000008',topic:'测试',children:[]});
      // return 
      // that.jm.add_node(userNo,this.index++,'avc',{id:'AA000008',topic:'测试',children:[]});
      // that.jm.add_node(userNo,''+that.index++,'avc',{id:'AA000008',topic:'测试',children:[]});
      that.$api.get('user/net/recommend?userNo='+userNo).then(res=>{
        if(res.code == 'SUCCESS'){
                const keys = []
                function traverse2(obj) {
                  Object.keys(obj).forEach(key => {
                    if(key == userNo){
                      keys.push(obj[key].subsList)
                    }
                  })
                }
                traverse2(res.data)
                let arr = keys[0];
                  for(let i in arr){
                      arr[i].id = arr[i].userNo;
                      arr[i].topic = arr[i].userName+'('+arr[i].userNo+')';
                      arr[i].children = [];
                      arr[i].expanded = true;
                      arr[i].parentid = userNo;
                      // 添加节点
                      console.log('arr:',arr[i])
                      // that.jm.add_node(userNo,''+that.index++,'avsdfasdfc',{id:'AA000008',topic:'测试',children:[]});
                      that.jm.add_node(userNo,''+arr[i].id,''+arr[i].userName+'('+arr[i].userNo+')',arr[i]);
                  }
                  console.log('that.list:',that.list)
                  
                // console.log('添加节点:',that.jm.add_node(userNo))
                // that.jm.show(that.mind);
                // return [...new Set(keys)] // 去重
            }
      })
    }
    
    
  },
  
}
</script>